<template>
  <div class="left">
    <div class="radar" ref="radar"></div>
    <div class="list">
      <div class="box">设备列表</div>
      <div class="config">
        <div class="item flex" v-for="item in list" :key="item.deviceId">
          <div class="item-left text-overflow">{{ item.deviceName }}</div>
          <div class="item-center">{{ item.deviceType }}</div>
          <div class="item-right">在线</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import visualizationApi from '@/api/visualization'

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      visualizationApi.deviceChart().then((res) => {
        this.list = res.list
        const option = {
          radar: {
            center: ['48%', '57%'],
            backgroundColor: '#00CDFF',
            indicator: [
              {
                name: '虫情设备旗舰版',
                value: res.data['虫情设备旗舰版'] ? res.data['虫情设备旗舰版'].length : 0,
                max: 5
              },
              { name: '墒情设备', value: res.data['墒情设备'] ? res.data['墒情设备'].length : 0, max: 5 },
              {
                name: '虫情设备普通版',
                value: res.data['虫情设备普通版'] ? res.data['虫情设备普通版'].length : 0,
                max: 5
              },
              { name: '狍子检测设备', value: res.data['孢子设备'] ? res.data['孢子设备'].length : 0, max: 5 },
              { name: '气象设备', value: res.data['气象设备'] ? res.data['气象设备'].length : 0, max: 5 }
            ],
            axisName: {
              formatter: function (value, indicator) {
                return value + '\n\n' + indicator.value + '台'
              },
              color: '#428BD4',
              fontSize: 15,
              color: '#fff'
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: '#000836' // 图表背景的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: '#0a5bde' // 设置网格的颜色
              }
            },
            // 设置雷达图中间射线的颜色
            axisLine: {
              lineStyle: {
                color: '#0a5bde',
                width: 2
              }
            }
          },
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: [
                    res.data['虫情设备旗舰版'] ? res.data['虫情设备旗舰版'].length : 0,
                    res.data['墒情设备'] ? res.data['墒情设备'].length : 0,
                    res.data['虫情设备普通版'] ? res.data['虫情设备普通版'].length : 0,
                    res.data['孢子设备'] ? res.data['孢子设备'].length : 0,
                    res.data['气象设备'] ? res.data['气象设备'].length : 0
                  ],
                  name: '设备'
                }
              ],
              itemStyle: { color: '#62c1e8' },
              areaStyle: { color: '#62c1e8' } //雷达覆盖区域背景颜色
            }
          ],
          tooltip: {
            show: true,
            backgroundColor: '#0a5bde',
            textStyle: {
              color: '#fff'
            }
          }
        }
        const echarts = this.$echarts.init(this.$refs.radar)
        echarts.setOption(option, true)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  margin-left: 0.125rem;
  margin-top: 0.0875rem;
  width: 6.875rem;
  .radar {
    width: 6.875rem;
    height: 5.5rem;
  }
  .list {
    .box {
      width: 6.875rem;
      height: 0.475rem;
      line-height: 0.475rem;
      background: linear-gradient(180deg, rgba(0, 205, 255, 0.04), rgba(0, 205, 255, 0.1));
      margin: 0.25rem 0;
      font-size: 0.25rem;
    }
    .config {
      width: 6.875rem;
      // height: 5.5rem;
      height: calc(100vh - 8rem);
      overflow: auto;
      .item {
        height: 0.575rem;
        line-height: 0.575rem;
        margin: 0 0.0625rem;
        padding-left: 0.25rem;
        font-size: 0.225rem;
        .item-left {
          width: 3.125rem;
        }
        .item-center {
          width: 2.375rem;
        }
      }
      .item:hover {
        box-shadow: inset 0 0 10px #1d5acc;
      }
    }
  }
}
</style>
